<template>
  <div class="login" >
    <h2  class="title">登录</h2>
    <!-- 
      el-form        表单分区组件
      el-form-item   一项表单(默认是一行)
        label="账号     设置左边的文字
      el-input       输入框
      el-button      按钮
        type="primary"   蓝色按钮
    -->
    <el-form
      ref="form"
      :model="form"
      label-width="60px"
      class="form"
      :rules='rules'
      
    >
      <el-form-item label="账号"
       prop="username"
       
      
      
      >
      <!-- 账号 -->
        <el-input 
        
        placeholder='请输入手机号码'
        v-model="form.username"
        prefix-icon="el-icon-s-custom"
         
        
        ></el-input>
      </el-form-item>
      <!-- 密码  - prefix-icon：添加首部图标
- suffix-icon:添加尾部图标-->
      <el-form-item label="密码"  prop="password">
        <el-input 
        type="password" 
        v-model="form.password"
         placeholder='请输入密码'
         prefix-icon="el-icon-search"
        

        ></el-input>
      </el-form-item>
      <el-form-item>
          <!-- 登录按钮 -->
        <el-button
          type="primary"
          @click="onSubmit"
        >登录</el-button>
        <el-button>取消</el-button>
         <el-button @click="resetBtn">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {userLoginAPI} from '../apis/user'
import { setToken, setUserId } from '../utils/localData';
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules:{
          username:[
            //   required:true 必填 message:提示信息 trigger:blur 触发时机
 { required: true, message: '请输入手机号码', trigger: 'blur' },
//  min：max:验证长度的
            { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
             message: '请输入正确手机号码', 
             trigger: 'blur' }
          ],
          password:[
   
//  min：max:验证长度的，可以组合一起写
            {required: true, min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
          ]
               
          
      },
    };

  },
  methods: {
    async onSubmit() {
//     //   console.log("点击了按钮");
//     const res = await userLoginAPI(this.form)
//     console.log(res);
//     if(res.data.message==='登录成功'){
//         //存储数据 登录的时候存储账号数据
//  setToken(res.data.data.token)
// //存储id，登录的时候存储id
//  setUserId(res.data.data.user.id)
//  //element 登录按钮，等于轻提示
//   this.$message({
//           message: '恭喜你，登录成功',
//           type: 'success'
//         });
//     }else{
//           this.$message({
//           message: '登录失败',
//           type: 'error'
//         });
//     }
   this.$refs.form.validate(async(valid)=>{
       console.log("是否所有表单都通过验证规则", valid);
       if(valid){
           // 发送请求
          const res = await userLoginAPI(this.form);
          console.log(res);
          if(res.data.message==='登录成功'){
              // 保存 token 和 id
            setToken(res.data.data.token);
            setUserId(res.data.data.user.id);
            // 成功提示
            this.$message({ message: "恭喜你，登录成功", type: "success" });
              // 跳转到项目首页
            // this.$router.push({ path: "/home" });
            //   path 路径可以简写成 ↓
            this.$router.push("/home");
          }else{
              // 情况2：登录失败提示
            this.$message({ message: "用户名或密码错误", type: "error" });
          }
       }else{
           console.log("error submit!!");
          this.$message({ message: "输入的数据不合法", type: "warning" });
          return false;
       }
   })
    },
     // 点击重置按钮
    resetBtn() {
      this.$refs.form.resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.login {
    
  background-color: #f2f2f2;
  // 1vw    视口宽度(viewport width)的 1%
  // 1vh    视口高度(viewport height)的 1%
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 10vh;
  box-sizing: border-box;
  .title {
    font-size: 30px;
    margin: 20px 0;
  }
  .form {
    background-color: #fff;
    width: 400px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  }
}
</style>

